<template>
  <bm-overlay
    ref="customOverlay"
    :class="{sample: true, active:level >=15 }"
    pane="labelPane"
    @draw="draw">
    <!-- <div v-text="text" @click="handleClick"></div> -->
    <div @click="findArea(text.value,text.coord)" v-if="level<15">
        <p>{{ text.label }}</p>
      <p>{{ text.count }}套</p>
    </div>
    <div @click="showHouse(text.value)" v-else>
      <p>{{ text.label }} {{ text.count }}套</p>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  name:'MyOverlay',
  props: ['text', 'position', 'level'],
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  methods: {
    //传ID和坐标去下一层
  findArea(value,coord){
    this.$emit('findArea',value,coord)

  },
  //显示小区
  showHouse(value){
this.$emit('showHouse',value)
  },
    // handleClick () {
     
    // },
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    }
  }
}
</script>

<style scoped lang="less">
.sample {
  width: 70px;
    height: 70px;
    line-height: 1;
    display: inline-block;
    position: absolute;
    border-radius: 100%;
    font-size: 14px;
    background: rgba(12,181,106,.9);
    color: #fff;
    border: 2px solid hsla(0,0%,100%,.8);
    text-align: center;
    cursor: pointer;;
}
.sample.active {
  height: 20px;
    line-height: 19px;
    width: 100px;
    padding: 0 3px;
    border-radius: 3px;
    position: absolute;
    background: rgba(12,181,106,.9);
    cursor: pointer;
    white-space: nowrap;
}
</style>
